<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div#outer{
            width: 500px;
            height: 500px;
            background-color:peru;
            margin: 30px auto;
            text-align: center;
        }
        img{
            width: 150px;
            height: 100px;
        }
        div.two div{
            float:left;
            margin: 7px;
            border: 1px solid blue;
            opacity: 0.5;
        }
        div.two div:hover{
            opacity: 1;
        }
        div#bottom div{
            width: 350px;
            margin: 0 auto;
            overflow: hidden;
            
        }
        div#bottom div p{
            
            background-color: yellow;
            float: left;
            width: 100px;
            height: 30px;
            color: red;
            margin-top: 10px;
            
            

        }
        h4{
            clear: left;
        }
    </style>
    <script>
        window.onload=function(){

            var arr=['paper.jpg','rock.jpg','scissor.jpg'];
            var img=document.images[0];
            function handler(){
                var random=Math.floor(Math.random()*arr.length);
                img.src='./images/'+arr[random];
            }
            setInterval(handler,100);
            var imgs=document.getElementsByClassName('img');
            var win=0;
            var lose=0;
            var pace=0;
            var windom=document.getElementById("win");
            var losedom=document.getElementById("lose");
            var pacedom=document.getElementById("pace");
            for(var i=0;i<imgs.length;i++){
                imgs[i].onclick=function(){
                    //console.log(this);
                    
                    var user=document.images[0].src;
                    if(user.indexOf("paper") != -1){
                        //电脑玩家为布
                        if(this.alt==0){
                            //当前用户为布
                            alert("平局---");
                            pacedom.innerHTML=pace++;
                            

                        }else if (this.alt==1) {
                            alert("你输了---");
                            losedom.innerHTML=lose++;

                        }else{
                            alert("你赢了---");
                            windom.innerHTML=win++;
                        }
                    }else if(user.indexOf("rock") != -1){
                        //电脑玩家为石头
                        if(this.alt==0){
                            //当前用户为布
                            alert("你赢了---");
                            windom.innerHTML=win++;
                        }else if (this.alt==1) {
                            alert("平局---");
                            pacedom.innerHTML=pace++;

                        }else{
                            alert("你输了---");
                            losedom.innerHTML=lose++;
                        }
                    }else{
                        //电脑玩家为剪刀
                        if(this.alt==0){
                            //当前用户为布
                            alert("你输了---");
                            losedom.innerHTML=lose++;
                        }else if (this.alt==1) {
                            alert("你赢了---");
                            windom.innerHTML=win++;
                        }else{
                            alert("平局---");
                            pacedom.innerHTML=pace++;

                        }

				    }
			    }
            }

    }


           
    </script>
</head>
<body>
    <div id="outer">
        <h1>石头剪刀布</h1>
        <div>
            <h3>电脑</h3>
            <div>
                <img src="./images/paper.jpg" alt="" style="border: 1px solid red;">
            </div>
        </div>
        <div class="two">
            <h3>玩家（请选择）</h3>
            <div>

                <img src="./images/paper.jpg" alt="0" class="img">
            </div>
            <div>
                <img src="./images/rock.jpg" alt="1" class="img">
            </div>
            <div>
                <img src="./images/scissor.jpg" alt="2" class="img">
            </div>
        </div>
        <h4></h4>
        <div id="bottom">
            <div>
                <p>胜利</p>
                <p>失败</p>
                <p>平局</p>
            </div>
            <div>
                <p id="win">0</p>
                <p id="lose">0</p>
                <p id="pace">0</p>
            </div>

        </div>
    </div>
</body>
</html>